{% extends 'layout/manage.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div>
            <div class="input-group" style="width: 300px">
                <span class="input-group-addon">日期范围</span>
                <input id="rangePicker" type="text" class="form-control">
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/daterangepicker/moment.min.js' %}"></script>
    <script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
    <script>
        $(function () {
            initDateRangePicker();
        });

        /*
        初始化时间区间选择
         */
        function initDateRangePicker() {
            // 配置项
            var options = {
                maxDate: moment(),  // 选择时间区间时最大只能选择到今天
                alwaysShowCalendars: true,    // 左边选择时 右边日期表都要显示
                showWeekNumbers: true,    //  日期表里面显示周几
                ranges: {
                    '今天': [moment(), moment()],     // 今天到今天
                    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],  // 昨天 = 今天减一天
                    '最近七天': [moment().subtract(6, 'days'), moment()],       // 前一周 今天减六天天
                    '最近30天': [moment().subtract(29, 'days'), moment()],
                    '本月': [moment().startOf('month'), moment().endOf('month')],     // 本月
                },
                locale: { // 相关提示重写格式和中文提示
                    format: 'YYYY-MM-DD',
                    separator: ' 至 ',
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '开始',
                    toLabel: '结束',
                    customRangeLabel: '自定义',
                    weekLabel: 'W',
                    daysOfWeek: ['一', '二', '三', '四  ', '五', '六', '日'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                },
            }
            $('#rangePicker').daterangepicker(
                options,  // 配置
                function (start, end, label) {
                    // 选择了时间后自动触发该函数
                    // console.log(start, end)     // 这里是时间对象
                    console.log(start.format('YYYY-MM-DD'), end.add(1, 'days').format('YYYY-MM-DD'))     // 这里是时间对象
                }
            );
        }

    </script>
{% endblock %}